<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue event</title>
    <script type="text/javascript" src="vue.js"></script>
  </head>
  <body>
    <div class="vue-event">
      <h3>监听事件</h3>
      <button v-on:click="counter += 1"> 增加1</button>
      <p>这个按钮被点击了 {{counter}} 次 </p>
    </div>
    <script type="text/javascript">
      var vueEvent1 = new Vue({
        el: '.vue-event',
        data:{
          counter:0
        }
      });
    </script>

    <div class="vue-event-2">
      <h3>方法事件处理器</h3>
      <button v-on:click="greet"> Greet</button>

    </div>
    <script type="text/javascript">
      var vueEvent2 = new Vue({
        el: '.vue-event-2',
        data:{
          name: 'Vue.js'
        },

        methods:{
           greet: function(event){
              alert("hello " + this.name + '!')
              alert(event.target.tagName)
           }
        }
      });
    </script>

    <div class="vue-event-inline">
      <h3>内联处理器方法</h3>
      <button @click="say('hi')">say hi </button>
      <button @click="say('hello')">say hello </button>

    </div>
    <script type="text/javascript">
      var vueEvent3 = new Vue({
        el: '.vue-event-inline',
        data: {},
        methods: {
          say: function(message){
            alert ('say : ' + message)
          }
        }
      });
    </script>

    <div class="vue-event-modifier">
      <h3>事件修饰符</h3>
      <button @click.once="say('just call one time')">只响应一次</button>
    </div>
    <script type="text/javascript">
      var vueEvent4 = new Vue({
        el: '.vue-event-modifier',
        methods: {
          say: function(message){
            alert(message)
          }
        }
      });
    </script>

    <div class="vue-event-keycode">
      <h3>按键修饰符</h3>
      <!-- Alt + C -->
<input @keyup.alt.67="clear" v-model="inputStr">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

    </div>
    <script type="text/javascript">
      var vueEvent5 = new Vue({
        el: '.vue-event-keycode',
        data: {
          inputStr: 'Press "Alt + C" clear this value'
        },
        methods:{
          clear: function(){
            this.inputStr = ''
          },
          doSomething: function(){
             alert(' "Ctrl + Click" are pressed!!!!!');
          }
        }
      });
    </script>



  </body>
</html>
